<script setup>
import { ref } from 'vue';
import { createOrder, getMedicinesPreOrder} from '@/apis/medicine.js';
import {getConsultPay} from '@/apis/consult.js'
import { getOrderAddress } from '@/apis/address';

const props=defineProps({
	id:String
})
//定义订单地址列表
const addressList=ref([])
//获取订单地址
  const getOrderAddressList=async()=>{
		const res=await getOrderAddress()
		addressList.value=res.data
	}
	getOrderAddressList()
	
	//定义药品订单
	const medicinesOrder=ref({})
	//获取药品订单
	const medicinesPreOrder=async()=>{
		const res=await getMedicinesPreOrder(props.id)
		medicinesOrder.value=res.data
	}
		medicinesPreOrder()
		
	const popupRef=ref(null)
	const orderId=ref('')

	//点击立即支付
	const onPay=async()=>{
		const res=await createOrder(medicinesOrder.value.id,addressList.value[0].id)
		orderId.value=res.data.id
		popupRef.value.popupOpen()
	}
	//点击关闭按钮
	const onClose=async()=>{
		const res = await uni.showModal({
		    title: '关闭支付',
		    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
		    cancelText: '仍要关闭',
		    cancelColor: '#848484',
		    confirmText: '继续支付',
		    confirmColor: '#16C2A3'
		  })
			//如果是取消按钮关闭弹出层
		  if (!res.confirm){
				popupRef.value.popupClose()
				}
	}
	//定义支付方式
	const paymentMethod=ref(1)
	//保存支付方式
	const onChoose=(val)=>{
		paymentMethod.value=val.paymentMethod
	}
	
	//立即支付
	const onConfirm=async()=>{
		const res= await getConsultPay({
			paymentMethod:paymentMethod.value,
			orderId:orderId.value,
			payCallback:'http://localhost:5173/#/subpkg_medicine/pay_result/index'
			})
			window.location.href=res.data.payUrl
	}
	
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment" v-for="item in addressList" :key="item.id">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{item.province+item.city+item.county}}
          </view>
          <view class="detail">{{item.addressDetail}}</view>
          <view class="receiver">{{item.receiver}} {{item.mobile}}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in medicinesOrder.medicines" :key="item.id">
          <image
            class="medicine-cover"
            :src="item.avatar"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name">{{item.name}}</text>
            <text class="unit" :class="{symbol:item.prescriptionFlag===1}">{{item.specs}}</text>
            <text class="price">¥{{item.amount}}</text>
          </view>
          <view class="quantity">x{{item.quantity}}</view>
          <view class="guide">用法用量：{{item.usageDosag}}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${medicinesOrder.payment?.toFixed(2)}`" />
          <uni-list-item title="运费" :right-text="`¥${medicinesOrder.expressFee?.toFixed(2)}`" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${medicinesOrder.couponDeduction?.toFixed(2)}`" />
          <uni-list-item title="实付款" :right-text="`¥${medicinesOrder.actualPayment?.toFixed(2)}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{medicinesOrder.payment}}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPay">立即支付</button>
        </view>
      </view>
    </view>
  </scroll-page>
	<custom-payment ref="popupRef" :orderId="orderId" :amount="medicinesOrder.actualPayment?.toFixed(2)" @close="onClose" @confirm="onConfirm"></custom-payment>
</template>

<style lang="scss">
  @import './index.scss';
</style>